﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>添加标注</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
        .checkbox
        {
            margin:5px 15px;
        }
        .marker {
          width: 20px;
          height: 20px;
          border: 1px solid #088;
          border-radius: 10px;
          background-color: #0FF;
          opacity: 0.5;
        }
        .address {
          text-decoration: none;
          color: #aa3300;
          font-size: 14px;
          font-weight: bold;
          text-shadow: black 0.1em 0.1em 0.2em;
        }

    </style>
</head>
<body>
    <div id="menu">
         选择标注类型后用鼠标在地图上点击添加标注：
         <label class="checkbox" ><input type="radio" name="label" value="vector" checked="checked"/>Vector Labels </label>
         <label class="checkbox" ><input type="radio" name="label" value="overlay"/>Overlay Labels</label>
    </div> 
    <div id="map" > 
    </div>
    <div id="label" style="display: none;">      
        <div id="marker" class="marker" title="Marker">
            <a class="address" id="address" target="_blank" href="http://www.openlayers.org/">标注点</a>
        </div>
    </div>
    <script type="text/javascript">
        var beijing = ol.proj.fromLonLat([116.28, 39.54]);
        var wuhan = ol.proj.fromLonLat([114.21, 30.37]);

        //实例化Map对象加载地图,默认底图加载MapQuest地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'osm' })
                })
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: beijing, //地图初始中心点
                minZoom: 2,
                zoom: 3
            })
        });

        /**
        * 创建矢量标注样式函数,设置image为图标ol.style.Icon
        * @param {ol.Feature} feature 要素
        */
        var createLabelStyle = function (feature) {
            return new ol.style.Style({
                image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
                    anchor: [0.5, 60],
                    anchorOrigin: 'top-right',
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    offsetOrigin: 'top-right',
                    // offset:[0,10],
                    // scale:0.5,  //图标缩放比例
                    opacity: 0.75,  //透明度
                    src: '../../images/label/blueIcon.png' //图标的url
                })),
                text: new ol.style.Text({
                    textAlign: 'center', //位置
                    textBaseline: 'middle', //基准线
                    font: 'normal 14px 微软雅黑',  //文字样式
                    text: feature.get('name'),  //文本内容
                    fill: new ol.style.Fill({ color: '#aa3300' }), //文本填充样式（即文字颜色）
                    stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                })
            });
        }

        //实例化Vector要素，通过矢量图层添加到地图容器中
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(beijing),
            name: '北京市',  //名称属性
            population: 2115 //大概人口数（万）
        });
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量标注的数据源
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        //矢量标注图层
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);

       // 实例化overlay标注，添加到地图容器中
        var marker = new ol.Overlay({
            position: wuhan,
            positioning: 'center-center',
            element: document.getElementById('marker'),
            stopEvent: false
        });
        map.addOverlay(marker);
        marker.getElement().title = "武汉市";
        var text = new ol.Overlay({
            position: wuhan,
            element: document.getElementById('address')
        });
        map.addOverlay(text);
        text.getElement().innerText = marker.getElement().title;

        //为地图容器添加单击事件监听
        map.on('click', function (evt) {
            var type = $("input[name='label']:checked").val();
            var point = evt.coordinate; //鼠标单击点坐标
            if (type == "vector") {
                addVectorLabel(point);//添加一个新的标注（矢量要素）
            }
            else if (type == "overlay") {
                addOverlayLabel(point);//添加新的图文标注（overlay标注）
            }     
        });

        /**
        * 添加一个新的标注（矢量要素）
        * @param {ol.Coordinate} coordinate 坐标点
        */
        function addVectorLabel(coordinate) {
            //新建一个要素 ol.Feature
            var newFeature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate),//几何信息
                name: '标注点'  //名称属性
            });
            newFeature.setStyle(createLabelStyle(newFeature));//设置要素的样式
            vectorSource.addFeature(newFeature);//将新要素添加到数据源中
        }

        /**
        * 添加一个新的图文标注（overlay标注）
        * @param {ol.Coordinate} coordinate 坐标点
        */
        function addOverlayLabel(coordinate) {
            //新增div元素
            var elementDiv = document.createElement('div'); 
            elementDiv.className = "marker";
            elementDiv.title = "标注点";
            var overlay = document.getElementById('label'); // 获取id为label的元素
            overlay.appendChild(elementDiv); // 为ID为label的div层添加div子节点
            //新增a元素
            var elementA = document.createElement("a");
            elementA.className = "address";
            elementA.href = "#";
            setInnerText(elementA, elementDiv.title); //设置文本
            elementDiv.appendChild(elementA); // 新建的div元素添加a子节点


            //实例化图文标注（图形+文本），添加到地图容器中
            var newMarker = new ol.Overlay({
                position: coordinate,
                positioning: 'center-center',
                element: elementDiv,
                stopEvent: false
            });
            map.addOverlay(newMarker);
            var newText = new ol.Overlay({
                position: coordinate,
                element: elementA
            });
            map.addOverlay(newText);
        }

        /**
        * 动态设置元素文本内容（兼容）
        */
        function setInnerText(element, text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }
    </script>
</body>
</html>
